<template>
  <div class='container'>
    <el-card>
      <span>陈晓东</span>
      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form>
          <el-form-item label="关键字" label-width="80px">
            <el-input  placeholder="根据编号搜索" size="small" v-model="form.keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  size="small" @click="handleClear">清除</el-button>
            <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 显示数据条数 -->
      <div class="data-text">
        <page-tools>
          <template v-slot:icon>
            <i class="el-icon-info" />
          </template>
          <template v-slot:before>
            <span class="data-total">数据一共 {{ total }} 条</span>
          </template>
        </page-tools>
      </div>
      <!-- 表格数据 -->
      <el-table
        :data="RandomsList">
        <el-table-column
          prop="id"
          label="编号"
          width="230">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="80">
        </el-table-column>
        <el-table-column
          width="220"
          label="题目编号">
          <template slot-scope="{ row }">
            <el-button @click="previewQuestion(item.id)" class="question-id" v-for="(item, index) in row.questionIDs" :key="index" type="text">{{ item.number }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          width="230"
          label="录入时间">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          width="230"
          label="答题时间(s)">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          width="295"
          label="正确率(%)">
        </el-table-column>
        <el-table-column
          prop="userName"
          width="295"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{ row }">
            <el-button icon="el-icon-delete" @click="handleDelete(row)" circle type="danger" size="small" />
          </template>
        </el-table-column>
      </el-table>
      <pagination @pageChange="getRandomsList" :total="total" :paginationPage.sync="page.page" :paginationPagesize.sync="page.pagesize" />
    </el-card>
    <questions-preview :dialogVisible.sync="questionPreviewDialog" :row="questionsDetail" />
  </div>
</template>

<script>
import pageTools from '../components/page-tools.vue'
import questionsPreview from '../components/questions-preview.vue'
import { randoms, detail, removeRandoms } from '../../api/hmmm/questions'
import { html2Text, parseTime } from '../../utils'
import { difficulty, questionType } from '@/api/hmmm/constants'
import Pagination from '../components/pagination'

export default {
  data () {
    return {
      form: {
        keyword: ''
      },
      total: 0,
      RandomsList: [],
      page: {
        page: 1,
        pagesize: 20
      },
      questionPreviewDialog: false,
      questionsDetail: {}
    }
  },
  components: {
    pageTools,
    questionsPreview,
    Pagination
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 删除试题
    handleDelete (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: row.id })
        // 更新当前页码
        const totalPage = Math.ceil((this.total - 1) / this.page.pagesize)
        const currentPage = this.page.page > totalPage ? totalPage : this.page.page
        this.page.page = this.page.page < 1 ? 1 : currentPage
        await this.getRandomsList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取列表
    async getRandomsList (value) {
      if (value) {
        this.form.keyword = ''
      }
      const { data } = await randoms({
        ...this.page,
        ...this.form
      })
      const formatList = data.items.map(item => {
        item.questionType = questionType.find(item2 => +item.questionType === item2.value).label
        return item
      })
      this.RandomsList = formatList
      this.total = data.counts
      this.page.page = data.page
      // this.page.pagesize = data.pagesize
    },
    // 预览试题
    async previewQuestion (id) {
      const { data } = await detail({
        id: id
      })
      this.questionsDetail = {
        ...this.formatData([data])[0]
        // subject: row.subject,
        // catalog: row.catalog
      }
      this.questionPreviewDialog = true
    },
    // 处理数据
    formatData (data) {
      return data.map(item => {
        item.answer = html2Text(item.answer)
        item.difficulty = difficulty.find(item1 => +item.difficulty === item1.value).label
        item.questionType = questionType.find(item2 => +item.questionType === item2.value).label
        item.addDate = parseTime(item.addDate)
        item.question = html2Text(item.question)
        return item
      })
    },
    // 点击了搜索
    handleSearch () {
      this.getRandomsList()
    },
    // 点击了清除
    handleClear () {
      this.form.keyword = ''
      this.getRandomsList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-form {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .el-input {
    width: 335px;
  }
}
.data-text {
  height: 35px;
  line-height: 35px;
  font-size: 13px;
  color: #909399;
  padding: 0 0 0 10px;
  background-color: #f4f4f5;
  .el-icon-info {
    font-size: 16px;
  }
  .data-total {
    margin-left: 10px;
  }
}
.question-id {
  padding: 0;
  margin: 0;
}
</style>
